import { ref, computed, reactive } from 'vue'
import { defineStore } from 'pinia'

export const useTodoStore = defineStore('todoList', () => {
  const todoList = reactive(
    [
      { id: Math.random(), text: 'Learn Vue', completed: true },
      { id: Math.random(), text: 'Learn React', completed: false },
      { id: Math.random(), text: 'Learn Angular', completed: false },
    ]
  )

  let filter = ref('all')

  const changefilter = (type) => {
    filter.value = type
  }

  const filteredTodoList = computed(() => {
    switch (filter.value) {
      case 'all':
        return todoList
      case 'done':
        return todoList.filter((todo) => todo.completed === true)
      case 'not':

        return todoList.filter((todo) => todo.completed === false)
    }
  })

  const addTodo = (todo) => {
    todoList.push({
      id: Math.random(),
      text: todo,
      completed: false
    })
    console.log(todoList)
  }
  const changestatus = (todo) => {
    todoList.find((item) => {
      if (item.id === todo.id) {
        item.completed = !item.completed
      }
    })
    console.log(todoList)
  }


  const deletetodo = (todo) => {
    todoList.splice(todoList.indexOf(todo), 1)
    console.log(todoList)
  }
  console.log(filteredTodoList)
  return { todoList, filter, filteredTodoList, changefilter, addTodo, changestatus, deletetodo }
})
